<template>
    <view class="container">

      <view class="card">
        <up-form
				labelPosition="left"
				:model="state.model"
				:rules="state.rules"
				ref="formRef"
		>
			<up-form-item
					label="品牌:"
					prop="brand"
					borderBottom
					ref="brandItem"
			>
				<up-input
            :disabled="(userProfile.profile?.brand!=='')"
						v-model="state.model.brand"
            placeholder="提交之后不能修改，请慎重填写"
				></up-input>
			</up-form-item>
		</up-form>
    <view class="wechat">
          <up-text text="上传您的微信二维码(非收款码,接受对方报价后，二维码会推送给对方):" style="margin-bottom: 10px"></up-text>
          <up-upload
		:fileList="fileList"
		@afterRead="afterRead"
		@delete="deletePic"
		name="1"
		:maxCount="1"
    deletable
    :previewFullImage="true"
	></up-upload>
      </view>
    <up-button type="success" @click="submit" style="margin-top: 16px;" :disabled="(userProfile.profile?.brand!=='')">提交</up-button>
  </view>
    </view>
    
</template>

<script setup lang="ts">
import { useMemberStore } from '@/stores/models/menbers';
import { ref, reactive } from 'vue';  
import { http } from '@/utils/http';
console.log(uni.$u.test.code('4567', 4));

 const fileList = ref([]);
 const userProfile = useMemberStore();
 const isCanInput =ref(false);
 
// 删除图片
const deletePic = (event) => {
  fileList.value.splice(event.index, 1);
};


// 新增图片
const afterRead = async (event) => {
  // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
  let lists = [].concat(event.file);
  let fileListLen = fileList.value.length;
  lists.map((item) => {
    fileList.value.push({
      ...item,
      status: 'uploading',
      message: '上传中',
    });
  });
  for (let i = 0; i < lists.length; i++) {
    const result = await uploadFilePromise(lists[i].url);
    let item = fileList.value[fileListLen];
    fileList.value.splice(fileListLen, 1, {
      ...item,
      status: 'success',
      message: '',
      url: result,
    });
    fileListLen++;
  }
};

const uploadFilePromise = (url) => {
  return new Promise((resolve, reject) => {
    let a = uni.uploadFile({
      url: '/upload', // 仅为示例，非真实的接口地址
      filePath: url,
      name: 'file',
      formData: {
        user: userProfile.profile?.openid,
      },
      success: (res) => {
        setTimeout(() => {
          resolve(res.data.data);
        }, 1000);
      },
    });
  });
};
  // 使用 reactive 创建响应式状态  
  const state = reactive({  
    model: {  
      brand:userProfile.profile?.brand,
    
    },  
    rules: {  
      'brand': [
        
      {   
        required: true,  
        message: '品牌为必填', 
        trigger: ['blur', 'change'],  
      },
      {    
        message: '请输入六个字以内的汉字', 
        validator: (rule, value, callback) => {
				return uni.$u.test.chinese(value)&&uni.$u.test.rangeLength(value,[1,6]);
			},
        trigger: ['blur', 'change'],  
      }
     
    ], 
   
    },  
    radio: '',  
    switchVal: false,  
  });  
    
  // 使用 ref 创建响应式引用  
  const formRef = ref();  
  const brandItem = ref(); 

  const submit=async ()=>{
     console.log(state.model);
     const valid =await formRef.value.validate(); 
    if (valid&&fileList.value.length===1) {  
      console.log("通过验证！")
    const data = await http<null>({
        url: "/user",
        data: {
           brand:state.model.brand
        },
        method: "PUT"
    });
    if(data.code==1000){
      userProfile.profile!.brand = state.model.brand;
     // isCanInput.value=true
    }else{
      uni.$u.toast(data.msg)
    }
    } else if(valid&&fileList.value.length===0) {  
      uni.$u.toast('请上传微信二维码')
    }  

  }


</script>


<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* 将表单置顶 */
  height: 100vh;
  padding: 20px;
  background-color: #f5f5f5;
}

.card {
  width: 100%;
  max-width: 400px;
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
  /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); */
  display: flex;
  flex-direction: column;
}
</style>